import React, {Component} from 'react';
import {
    StyleSheet,
    View
} from 'react-native';
import {
    Container,
    Header,
    Content,
    Footer,
    FooterTab,
    Button,
    Icon,
    Text,
    Toast
} from 'native-base';

/**
 * 作者：guoyzh
 * 时间：2018/6/3/003
 * 功能：首页切换的Tab
 */
export default class AppNativeBase extends Component {
    constructor(props) {
        super(props);
        this.state = {
            type: this.props.type,
            selecTedTab: "apps",
            is1Selected: true, // 记录第1个tab是否是选中状态
            is2Selected: false,// 记录第2个tab是否是选中状态
            is3Selected: false,// 记录第3个tab是否是选中状态
            is4Selected: false,// 记录第4个tab是否是选中状态
        };
    }

    render() {
        return (
            <Container>
                <Content/>
                <Footer>
                    <FooterTab style={styles.tables}>

                        // 第一个tab
                        <Button vertical active={this.state.is1Selected}
                                onPress={() => {
                                    this.updateTabName("apps"); // 更新tab名称
                                    this.state.is1Selected = true;
                                    this.state.is2Selected = false;
                                    this.state.is3Selected = false;
                                    this.state.is4Selected = false;
                                }}>
                            <Icon name="apps"/>
                            <Text>应用</Text>
                        </Button>

                        // 第二个tab
                        <Button vertical active={this.state.is2Selected}
                                onPress={() => {
                                    this.updateTabName("camera"); // 更新tab名称
                                    this.state.is1Selected = false;
                                    this.state.is2Selected = true;
                                    this.state.is3Selected = false;
                                    this.state.is4Selected = false;
                                }}>
                            <Icon name="camera"/>
                            <Text>相机</Text>
                        </Button>

                        // 第三个tab
                        <Button vertical active={this.state.is3Selected}
                                onPress={() => {
                                    this.updateTabName("navigate"); // 更新tab名称
                                    this.state.is1Selected = true;
                                    this.state.is2Selected = false;
                                    this.state.is3Selected = true;
                                    this.state.is4Selected = false;
                                }}>
                            <Icon active name="navigate"/>
                            <Text>导航</Text>
                        </Button>

                        // 第四个tab
                        <Button vertical active={this.state.is4Selected}
                                onPress={() => {
                                    this.updateTabName("person"); // 更新tab名称
                                    this.state.is1Selected = false;
                                    this.state.is2Selected = false;
                                    this.state.is3Selected = false;
                                    this.state.is4Selected = true;
                                }}>
                            <Icon name="person"/>
                            <Text>我的</Text>
                        </Button>

                    </FooterTab>
                </Footer>
            </Container>
        );
    }

    /**
     * 每次点击的时候更新state中的tab名称
     */
    updateTabName(name) {
        this.state.selecTedTab = name;
    }

    // 生命周期
    componentDidMount() {

    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    tables: {
        height: 50,
        backgroundColor: '#FEFEFE',
        justifyContent: 'center',
        alignItems: 'center',
    },
    table_items: {
        backgroundColor: '#FEFEFE',
    }
});